<template>
  <div class="my-daily" name="myDaily">
    <div class="title pl10">
      <div>问题跟踪</div>
      <div class="right-icon" @click="lookAll">
        <span class="all">查看全部</span>
        <el-icon class="all-size"><ArrowRightBold /></el-icon>
      </div>
    </div>
    <ul class="resource-list" v-if="list.length">
      <li class="pl10 pr10 resource-list-item" v-for="(item, key) in list" :key="key">
        <span class="title sle">{{ (item.projectName ? item.projectName + "-" : "") + item.projectCode }}</span>
        <span class="track-table-status" :class="colorOrderStatusMap[item.status]">
          {{ getDictItem("projectProblemStatus", item.status) }}
        </span>
        <span class="content sle">{{ item.content }}</span>
        <span class="item-date">{{ item.gmtCreate }}</span>
      </li>
    </ul>
    <div class="resource-list" v-else>
      <el-empty></el-empty>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useDict } from "@/hooks/useDict";
import { getProjectProblemTop50 } from "@/api/modules/project";
const { getDictItem, promise, getDictId } = useDict(["projectProblemStatus"]);
const colorOrderStatus = [
  "track-table-status-progress1",
  "track-table-status-progress2",
  "track-table-status-progress3",
  "track-table-status-progress4",
  "track-table-status-progress5"
];
const colorOrderStatusMap: any = {};

const router = useRouter();
const lookAll = () => {
  router.push({ path: "/track-next" });
};

// 问题列表
const list = ref<any>([]);
const getTableList = async () => {
  const { data } = await getProjectProblemTop50();
  list.value = (data ?? []).slice(0, 5);
};
onMounted(async () => {
  const data = await promise;
  data[getDictId("projectProblemStatus")].forEach((item: any, index: number) => {
    item.className = colorOrderStatus[index];
    colorOrderStatusMap[item.id] = item.className;
  });
  getTableList();
});
</script>
<style scoped lang="scss">
.my-daily {
  display: flex;
  flex-flow: column nowrap;
  padding: 0 20px 18px;
  margin-bottom: 10px;
  background-color: #ffffff;
  box-sizing: border-box;
  height: 420px;
  border-radius: 4px;
  .title {
    box-sizing: border-box;
    display: flex;
    flex: 0 0 72px;
    justify-content: space-between;
    font-weight: 600;
    width: 100%;
    font-size: 16px;
    line-height: 72px;
    color: #333333;
    text-align: left;
    background: #ffffff;
    .right-icon {
      display: flex;
      gap: 10px;
      align-items: center;
      font-size: 14px;
      cursor: pointer;
      .el-icon {
        font-size: 14px;
      }
      .all {
        font-weight: 400;
        color: #999999;
      }
      .all-size {
        font-weight: 400;
        color: #999999;
        font-size: 12px;
      }
    }
  }
  .resource-list {
    box-sizing: border-box;
    width: 100%;
    height: 420px;
    padding-left: 0;
    margin: 0;
    overflow: auto;
    .title {
      font-size: 14px;
      font-weight: 400;
    }
    li {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      gap: 40px;
      height: 64px;
      font-size: 14px;
      color: #333333;
      border-bottom: 1px solid #f2f2f2;
      .title {
        flex: 0 0 180px;
        word-break: break-all;
        background: transparent;
      }
      .content {
        flex: 1;
        word-break: break-all;
        width: max-content;
      }
      .item-date {
        flex: 0 0 140px;
      }
      &:hover {
        background: var(--el-color-primary-light-9);
      }
    }
  }
  .el-collapse-item {
    box-sizing: border-box;
  }
  .collapse-cot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    block-size: border-box;
    height: 64px;
    padding: 0 20px 0 56px;
    line-height: 64px;
    border-bottom: 1px solid #f2f2f2;
    &:last-child {
      border-bottom: none;
    }
    .project-name {
      display: flex;
      align-items: center;
      span:last-child {
        margin-left: 12px;
      }
    }
    .status {
      display: flex;
      align-items: center;
      span:last-child {
        margin-left: 40px;
      }
      span:first-child {
        height: 24px;
        padding: 0 18px;
        font-size: 12px;
        line-height: 24px;
        color: #ffffff;
        background: #f8d27c;
        border-radius: 14px;
      }
    }
  }
  .track-table-status {
    flex: 0 0 110px;
    border-radius: 14px;
    border: 1px solid transparent;
    font-size: 12px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    color: inherit;
    box-sizing: border-box;
    padding: 0 10px;
  }
  .track-table-status-progress1 {
    color: $order-color-2;
    background-color: $order-bg-color-2;
  }
  .track-table-status-progress2 {
    color: $order-color-1;
    background-color: $order-bg-color-1;
  }
  .track-table-status-progress3 {
    color: $order-color-3;
    background-color: $order-bg-color-3;
  }
  .track-table-status-progress4 {
    color: $order-color-5;
    background-color: $order-bg-color-5;
  }
  .track-table-status-progress5 {
    color: $order-color-4;
    background-color: $order-bg-color-4;
  }
}
</style>
